<template>
  <div style="width:100%;height:100%">
    <div class="model2title">{{ title }}周期检测覆盖情况</div>

    <div class="content" v-if="siteNameYearList.length">
      <div class="headerContent">
        <div class="one" />
          <div v-for="(item,index) in siteNameYearList[0].list" :key="index" class="to">{{ item.checkMonth }}</div>
      </div>
      <div class="tableData">
        <div v-for="(item,index) in siteNameYearList" :key="index" class="td">
          <div class="one">{{ item.siteName }}</div>
          <el-popover
            v-for="(r,i) in item.list"
            :key="i"
            class="tdTo"
            placement="right"
            popper-class="indexDialog4"
            width="148"
            height="132"
            trigger="click"
            :visible-arrow="false">
            <div>{{ r.deptName }}</div>
            <div>区站：{{ r.siteName }}</div>
            <div>检测月份：{{ r.checkMonth }}</div>
            <div>计划次数：{{ r.planCount }}次</div>
            <div>检测次数：{{ r.checkCount }}次</div>
            <div
              slot="reference"
              class="tdTo"
              :class="r.checkCount >= r.planCount ? 'default1' : r.checkCount < r.planCount && r.checkCount !== 0 && r.planCount !== 0 ? 'warning1' : r.checkCount === 0 || r.planCount === 0 ? 'red1' : ''">
              <div
                :class="r.checkCount >= r.planCount ? 'default' : r.checkCount < r.planCount && r.checkCount !== 0 && r.planCount !== 0  ? 'warning' : r.checkCount === 0 || r.planCount === 0 ? 'red' : ''">{{ r.planCount }}</div>
              <div >{{ r.checkCount }}</div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <div v-else class="el-select-custom__empty">无数据</div>

  </div>
</template>
<script>
export default {
  props: {
    siteNameYearList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataHeader: [

      ],
      data: [

      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.model2title {
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    padding: 0 20px;
}
.content {
    height: calc(100% - 60px);
    width: 100%;
}
.headerContent {
    display: flex;
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
    padding: 0 20px;
    text-align: center;
}
.one {
    width: 10%;
    height: 100%;
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
}
.to {
    width: 7.5%;
    font-size: 12px;
    color: #ffffff;
}
.td {
    display: flex;
    width: 100%;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tdTo {
    width: 7%;
    height: 100%;
    display: flex;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
    text-align: center;
}
.default {
    background: #1f3275;
    border-radius: 4px;
}
.default1 {
    background: #213a91;
    width: 100%;
    cursor: pointer;
}

.warning {
    background: #be7b17;
    border-radius: 4px;
}
.warning1 {
    background: #de9b38;
    width: 100%;
    cursor: pointer;
}
.red {
    background: #751f1f;
    border-radius: 4px;
}
.red1 {
    background: #ae3831;
    width: 100%;
    cursor: pointer;
}
.tableData {
    width: 100%;
    height: calc(100% - 35px);
    overflow: auto;
    padding: 0 20px;
}
.tableData::-webkit-scrollbar {
    width: 4px;
    background: #0f1f56 !important;
}
::-webkit-scrollbar-track {
    background-color: #0f1f56;
}
::-webkit-scrollbar-thumb {
    border: 0 !important;
    background-color: rgba(105, 115, 133, 0.3);
}
.el-select-custom__empty{
        padding: 30px 0 4px;
        text-align: center;
        color: #999;
        font-size: 14px;
      }
</style>
